<template>
<div class="all-city">
<div>
<ul class="this-city">
<h2 class="border-bottom">当前城市</h2>
<li class="border-bottom"><span>{{ this.$store.state.curCity }}</span></li>
</ul>
<ul class="hot-city">
<h2 class="border-bottom">热门城市</h2>
<li v-for="item of hotlist" :key="item.id" @click="handleCity(item.name)"><span>{{ item.name }}</span></li>
</ul>

<div v-for="(value,key) of list" :key="key">
<ul class="a-start">
<h2 class="border-topbottom" :ref="key">{{key}}</h2>
<li class="border-bottom" v-for="item of value" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityAdress',
  props: {
    list: Object,
    hotlist: Array,
    letter: String
  },
  methods: {
    handleCity (city) {
      this.$store.dispatch('selectCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    let wrapper = document.querySelector('.all-city')
    this.scroll = new BScroll(wrapper, {
      tap: true,
      click: true
    })
  },
  watch: {
    letter () {
      this.scroll.scrollToElement(this.$refs[this.letter][0], 300)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
.all-city
  position absolute
  top 1.6rem
  left 0rem
  right 0rem
  bottom 0rem
  z-index -1
  overflow hidden
.this-city
  h2
    background #EEEEEE
    padding 0.2rem 0
    font-size 0.32rem
    padding-left 0.2rem
    color #616161
  li
    padding 0.4rem 0
    margin-left 0.2rem
    font-size 0.32rem
    span
      border 1px solid #CCCCCC
      padding 0.12rem 0.6rem
      border-radius 0.06rem
.hot-city
  width 100%
  overflow auto
  h2
    background #EEEEEE
    padding 0.2rem 0
    font-size 0.32rem
    padding 0.2rem
    margin-bottom 0.1rem
    color #616161
  li
    margin 0.2rem 0.1rem
    font-size 0.32rem
    float left
    display flex
    justify-content center
    span
      width 100%
      border 1px solid #CCCCCC
      padding 0.12rem 0.6rem
      border-radius 0.06rem
      flex-grow 1
      flex-wrap wrap
      align-content space-between
.a-start
  margin-top 0.1rem
  h2
    background #EEEEEE
    padding 0.2rem 0
    font-size 0.32rem
    padding 0.2rem
    margin-bottom 0.1rem
    color #616161
  li
    padding 0.3rem 0.2rem
    font-size 0.32rem
</style>
